<!-- @format -->

<template>
  <el-upload
    action=""
    :limit="limit"
    :auto-upload="false"
    :on-preview="onPreviewImage"
    :on-remove="handleRemove"
    :on-change="handleChange"
    accept="video/*"
  >
    <div class="upload-demo">
      <el-icon> <Plus /></el-icon>
    </div>
  </el-upload>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { postFileUpload } from '@/api/global';
  const theFileList: any = ref([]);
  const theEmit = defineEmits(['success']);
  defineProps({
    theme: {
      type: String,
      default: 'default', // default, primary
    },
    limit: {
      type: Number,
      default: 9,
    },
  });
  const handleRemove = (file: any) => {
    theFileList.value = theFileList.value.filter(
      (item: any) => item.uid !== file.uid,
    );
    theEmit(
      'success',
      theFileList.value.map((item: any) => item.url),
    );
  };
  const handleChange = async (file: any) => {
    var formData = new FormData();
    formData.append('file', file.raw);
    const theResultData = await postFileUpload(formData);
    theFileList.value.push({
      url: theResultData,
      name: file.name,
      uid: file.uid,
    });
    theEmit(
      'success',
      theFileList.value.map((item: any) => item.url),
    );
  };
  // 当前预览图片 start
  const theDialogPreviewRef = ref();
  const onPreviewImage = (item: any) => {
    theDialogPreviewRef.value.open({
      url: item.url,
      type: 'image',
    });
  };
</script>

<style lang="scss" scoped>
  .upload-demo {
    width: 180px;
    height: 180px;
    line-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    background: #f0ece4;
    font-size: 52px;
    border-radius: 10px;
    border: 1px solid #d7d5cd;
    color: #000;
    @media screen and (max-width: 768px) {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
  }
</style>
